<template>
    <div class="role-container">
        <el-row :gutter="20">
            <el-col :span="10">

                <el-form ref="roleField" :model="roleField" :rules="rules" :hide-required-asterisk="true" label-width="80px" size="small">
                    <el-form-item label="角色id" v-show="false">
                        <el-input v-model="roleField.id" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="角色名称" prop="roleName">
                        <el-input v-model="roleField.roleName" placeholder="输入角色名称" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="角色标识" prop="roleKey">
                        <el-input v-model="roleField.roleKey" placeholder="输入角色标识" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="配置菜单" prop="menus">
                        <div class="menus">
                            <el-tree
                                    :data="roleField.menus"
                                    :props="props"
                                    show-checkbox
                                    accordion
                                    node-key="id"
                                    ref="tree"
                                    :default-expanded-keys="defaultExpandedKeys"
                                    :default-checked-keys="defaultCheckedKeys"
                                    @check="handleCheck">
                            </el-tree>
                        </div>
                    </el-form-item>
                    <el-form-item label="角色类型" v-show="false">
                        <el-radio-group v-model="roleField.type" size="mini">
                            <el-radio-button :label="0">全局</el-radio-button>
                            <el-radio-button :label="1">自定</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="开启状态">
                        <el-radio-group v-model="roleField.status" size="mini">
                            <el-radio-button :label="1">启用</el-radio-button>
                            <el-radio-button :label="0">停用</el-radio-button>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('roleField')" :loading="disabled">修改角色
                        </el-button>
                        <el-button @click="goBack">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-col>
            <el-col :span="12">

            </el-col>
        </el-row>
    </div>
</template>

<script>
import {roleAvailableMenu, getRoleById, updateRoleById} from "src/api/permission"

export default {
    name: "RoleUpdate",
    data() {
        let checkMenus = (rule, value, callback) => {
            if(this.$refs.tree.getCheckedKeys().length === 0) {
                return callback(new Error('选择配置菜单'))
            } else {
                callback()
            }
        }
        return {
            roleField: {
                roleName: "",
                roleKey: "",
                type: 0,
                status: 1,
                menus: [],
            },
            checkedMenu: [],
            disabled: false,
            props: {
                label: 'menuName',
                children: 'children'
            },
            rules: {
                roleName: [
                    { required: true, message: '角色名称不能为空', trigger: 'blur' }
                ],
                roleKey: [
                    { required: true, message: '角色标识不能为空', trigger: 'blur' }
                ],
                menus: [
                    {required: true, validator: checkMenus, trigger: 'change' }
                ]
            },
            defaultExpandedKeys: [],
            defaultCheckedKeys: []
        }
    },
    created() {
        this.roleAvailableMenu()
        this.getRoleById({
            id: this.$route.query.id
        })
    },
    methods: {
        // 获取已选的菜单
        getRoleById(id) {
            getRoleById(id).then(response => {
                if(response.code == 20000) {
                    this.roleField.id = response.data.id
                    this.roleField.roleName = response.data.roleName
                    this.roleField.roleKey = response.data.roleKey
                    this.roleField.type = response.data.type
                    this.roleField.status = response.data.status

                    this.checkedMenu = response.data.menus

                    let fn = (arr,expand,checked)=>{
                        arr.forEach(menu=>{
                            expand.push(menu.id)
                            if(menu.children && menu.children.length > 0){
                                fn(menu.children,expand,checked)
                            }else{
                                checked.push(menu.id)
                            }
                        })
                    }
                    let expand = []
                    let checked = []

                    fn(this.checkedMenu,expand,checked)

                    this.defaultExpandedKeys = expand
                    this.defaultCheckedKeys = checked
                }
            })
        },

        roleAvailableMenu() {
            roleAvailableMenu().then(response => {
                this.roleField.menus = response.data
            })
        },

        handleCheck(...value) {
            this.roleField.memus = value[1].checkedNodes
        },

        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {

                if (valid) {
                    this.disabled = true
                    window.setTimeout(() => {
                        this.disabled = false
                    }, 2000)

                    let checkedNodes = this.$refs.tree.getCheckedKeys()
                    let hafCheckedNodes = this.$refs.tree.getHalfCheckedKeys()

                    let params = {}
                    let menu = checkedNodes.concat(hafCheckedNodes)
                    params.menus = []
                    menu.forEach(item => {
                        params.menus.push( {"id":item})
                    })

                    params.id = this.roleField.id
                    params.roleName = this.roleField.roleName
                    params.roleKey = this.roleField.roleKey
                    params.type = this.roleField.type
                    params.status = this.roleField.status

                    updateRoleById(params).then(response => {
                        if(response.code == 20000) {
                            this.$message.success({
                                message: '已成功更新角色数据 即将返回角色列表',
                                duration: 2000,
                                center:true
                            })

                            window.setTimeout(() => {
                                this.goBack()
                            }, 600)
                        }
                    })
                }
            })
        },
        goBack() {
            this.$router.back()
        }
    }
}
</script>

<style lang="scss" scoped>
.role {
    &-container {
        margin: 30px;

        .menus {
            height: 300px;
            overflow: hidden;
            overflow-y: scroll;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
        }
        .menus::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 6px;  /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
        .menus::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 4px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
            background: #ededed;
        }
        .menus::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow: inset 0 0 5px rgba(220, 223, 230, 0.2);
            border-radius: 4px;
            background: #F5F5F5;
        }
    }
}
</style>
